<template>
    <div>

        <!-- 内容 -->
        <!-- 内容 -->
        <div class="content">
            <div class="titleClass" @click="Change">
                <div>{{ BenchName }}</div>
                <img style="margin:9px 12px 10px 11px;width:14px;height:6px;" src="../../../assets/images/Vector 830.png">
            </div>
            <div style="height: 93%;overflow: auto;">
                <div class="contentClassBench">
                    <div style="margin-top: 14px;">
                        <div class="titleClass titleClassOne">
                            <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                src="../../../assets/images/矩形装饰.png" />
                            顶管长度
                        </div>
                        <div class="contentClass JCC" style="padding: 15px;">
                            <div class="Flex" style="width: 50%;justify-content: flex-end;">
                                <img style=" width: 116px; height: 100px"
                                    src="../../../assets/images/色相_饱和度 6 灰大素材 1.png" />
                            </div>
                            <div class="Flex JCC FDC" style="width: 50%;">
                                <div style="width: 100%;height:24px ;">累计顶进长度</div>
                                <div style="width: 100%;height:24px ;">{{ DGformDataConfig.ljdjcd }}m</div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 14px;">
                        <div class="titleClass titleClassOne">
                            <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                src="../../../assets/images/矩形装饰.png" />
                            顶管机状态
                        </div>
                        <div class="contentClass JCC FDC" style="padding: 15px;">
                            <div class="lJStyle Flex" style="margin-bottom: 12px">
                                <div class="Flex" style="width: 13%; height: 100%; justify-content: center">
                                    <img src="../../../assets/images/联合 216-6.png" style="width: 15px; height: 15px"
                                        alt="" />
                                </div>
                                <div class="Flex" style="
                        width: 80%;
                        height: 100%;
                        justify-content: space-between;
                        font-size: 12px;
                      ">
                                    <div style="padding-left: 16px">设备状态</div>
                                    <div style="color: #42eec7">{{ DGformDataConfig.devicestatus ?
                                        DGformDataConfig.devicestatus == 0 ?
                                            "在线" :
                                            "报警" : "--" }}</div>
                                </div>
                            </div>
                            <div class="lJStyle Flex" style="margin-bottom: 18px">
                                <div class="Flex" style="width: 13%; height: 100%; justify-content: center">
                                    <img src="../../../assets/images/Frame-2.png" style="width: 15px; height: 15px"
                                        alt="" />
                                </div>
                                <div class="Flex" style="
                        width: 80%;
                        height: 100%;
                        justify-content: space-between;
                        font-size: 12px;
                      ">
                                    <div style="padding-left: 16px">设备名称</div>
                                    <div style="color: #42eec7">{{ DGformDataConfig.deviceName
                                        ? DGformDataConfig.deviceName : '--' }}</div>
                                </div>
                            </div>
                            <div class="lJStyle Flex">
                                <div class="Flex" style="width: 13%; height: 100%; justify-content: center">
                                    <img src="../../../assets/images/Frame-1.png" style="width: 15px; height: 15px"
                                        alt="" />
                                </div>
                                <div class="Flex" style="
                        width: 80%;
                        height: 100%;
                        justify-content: space-between;
                        font-size: 12px;
                      ">
                                    <div style="padding-left: 16px">设备编号</div>
                                    <div style="color: #42eec7">{{ DGformDataConfig.deviceId
                                        ? DGformDataConfig.deviceId : '--' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 14px;">
                        <div class="titleClass titleClassOne">
                            <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                src="../../../assets/images/矩形装饰.png" />
                            运行参数
                        </div>
                        <div class="contentClass JCC FDC" style="padding: 15px;">
                            <div class="Flex" style="justify-content:space-between;height: 29%;">
                                <div style="position: relative;margin-right: 10px;">
                                    <div class="Flex"
                                        style="width:75%;justify-content: space-between;position:absolute;left:20px">
                                        <img style="width: 52px; height: 45px;"
                                            src="../../../assets/images/Group 1000004701.png" />
                                        <div>
                                            <div class="gradient-text" style="font-size: 12px;">{{ DGformDataConfig.qj }}°
                                            </div>
                                            <div style="font-size: 10px;">转角</div>
                                        </div>
                                    </div>
                                    <img style="width: 200px; height: 32px;margin-top: 40px;"
                                        src="../../../assets/images/内容底.png" />
                                </div>
                                <div style="position: relative;">
                                    <div class="Flex"
                                        style="width:75%;justify-content: space-between;position:absolute;left:20px">
                                        <img style="width: 52px; height: 45px;"
                                            src="../../../assets/images/Group 1000004701.png" />
                                        <div>
                                            <div class="gradient-text" style="font-size: 12px;">{{ DGformDataConfig.zj }}°
                                            </div>
                                            <div style="font-size: 10px;">转角</div>
                                        </div>
                                    </div>
                                    <img style="width: 200px; height: 32px;margin-top: 40px;"
                                        src="../../../assets/images/内容底.png" />
                                </div>
                            </div>
                            <div
                                style="position: relative;height:136px;width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 10px;">
                                <img style="width: 90px; height:90px;margin: auto;"
                                    src="../../../assets/images/Group 1000004632.png" />
                                <div class="Flex"
                                    style="position: absolute;top:-2%;height: 45%;width: 100%;justify-content: space-between;">
                                    <div class="horn DJF" style="text-align: center;">
                                        <div class="Flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏行程</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpxc4 }}</span>
                                                <span style="margin-left: 10px;">mm</span>
                                            </div>
                                        </div>
                                        <div class="Flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏压力</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpyl4 }}</span>
                                                <span style="margin-left: 10px;">MPa</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="horn DJF" style="">
                                        <div class="flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏行程</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpxc3 }}</span>
                                                <span style="margin-left: 10px;">mm</span>
                                            </div>
                                        </div>
                                        <div class="flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏压力</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpyl3 }}</span>
                                                <span style="margin-left: 10px;">MPa</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Flex"
                                    style="position: absolute;top:60%;height: 45%;width: 100%;justify-content: space-between;">
                                    <div class="horn DJF" style="text-align: center;">
                                        <div class="Flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏行程</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpxc1 }}</span>
                                                <span style="margin-left: 10px;">mm</span>
                                            </div>
                                        </div>
                                        <div class="Flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏压力</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpyl1 }}</span>
                                                <span style="margin-left: 10px;">MPa</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="horn DJF" style="">
                                        <div class="Flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏行程</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpxc2 }}</span>
                                                <span style="margin-left: 10px;">mm</span>
                                            </div>
                                        </div>
                                        <div class="Flex" style="width:100%;justify-content: space-between;">
                                            <div>纠偏压力</div>
                                            <div>
                                                <span>{{ DGformDataConfig.jpyl2 }}</span>
                                                <span style="margin-left: 10px;">MPa</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 14px;">
                        <div class="titleClass titleClassOne">
                            <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                src="../../../assets/images/矩形装饰.png" />
                            顶进工况参数
                        </div>
                        <div class="contentClass JCC FDC" style="padding: 15px;">
                            <div class="Flex" style="margin-bottom: 10px" v-for="ele in dataList">
                                <div class="Flex">
                                    <img :src="ele.icon" style="width: 58px; height: 58px" alt="" />
                                </div>
                                <div class="Flex join" style="width: 80%;">
                                    <div class="Flex" style="width: 50%;justify-content: space-around;">
                                        <img src="../../../assets/images/Group 1000004641.png"
                                            style="width: 8px; height: 18px" alt="" />
                                        <div>{{ ele.name }}</div>
                                        <img src="../../../assets/images/Group 1000004642.png"
                                            style="width: 8px; height: 18px" alt="" />
                                    </div>
                                    <div v-if="ele.name == '泥仓压力' || ele.name == '进水压力'" class="Flex"
                                        :style="{ color: ele.stateColor, }"
                                        style="width: 40%;justify-content: space-around;color: #42eec7">
                                        <div>{{ ele.num }}</div>
                                        <div>{{ ele.unit }}</div>
                                    </div>
                                    <div v-else class="Flex" :style="{ color: ele.stateColor, }"
                                        style="width: 40%;justify-content: space-around;color: #42eec7">
                                        <div>{{ ele.state }}</div>
                                        <!-- <div>Bar</div> -->
                                    </div>

                                </div>
                            </div>
                            <div class="Flex JCC FDC" style="width: 100%;">
                                <div class="warningStyle Flex JCC" style="color:#FF4004" v-if="DGformDataConfig.dpbpgz">
                                    刀盘变频故障</div>

                                <div style="height: 300px;padding-top: 20px;width: 100%;">
                                    <div ref="myChart" id="main1" style="width: 100%;height: 300px;"></div>
                                </div>
                                <div style="height: 300px;width: 100%;">
                                    <div ref="myChart" id="main2" style="width: 100%;height: 300px;"></div>
                                </div>
                                <div class="warningStyle Flex JCC">
                                    <div style="color:#27F2FF">刀盘状态</div>
                                    <div style="margin-left: 30px;">{{ DGformDataConfig.dpstatus ?
                                        DGformDataConfig.dpstatus == 0 ?
                                            "正转" :
                                            "反转" : "--" }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <van-popup v-model:show="projectListshow" position="bottom" :style="{ height: '50%' }">
                <van-picker show-toolbar title="切换顶管机" :model-value="BenchId"
                    :columns="BenchList.map(item => { return { text: item.pushbenchname, value: item.id, } })"
                    @cancel="() => { projectListshow = false }" @confirm="updateBench" />
            </van-popup>
        </div>

    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { GetPushBench, GetPBGKDateList, } from "@/api";
import { useAppStore } from "../../../store";
import * as echarts from 'echarts';
// import dayjs from "dayjs";
import { CreatedFormData } from "@/utils/CreatedFormData";
export default defineComponent({
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
        const myChart1 = ref(null)
        const myChart2 = ref(null)
        const BenchId = ref([]);
        const BenchName = ref("--");
        const DGformDataConfig = ref({})
        const projectListshow = ref(false)
        const BenchList = ref([])
        const dataList = ref([
            {
                icon: new URL("@/assets/images/Group 1000004910.png", import.meta.url)
                    .href,
                name: "泥仓压力",
                num: "--",
                unit: "bar",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004922.png", import.meta.url)
                    .href,
                name: "进水压力",
                num: "--",
                unit: "bar",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                    .href,
                name: "进水泵状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#FF4004"
            },
            {
                icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                    .href,
                name: "抽水泵状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                    .href,
                name: "排泥泵状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#F2B55A"
            },

            {
                icon: new URL("@/assets/images/Group 1000004925.png", import.meta.url)
                    .href,
                name: "纠偏泵站状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004925.png", import.meta.url)
                    .href,
                name: "主顶油缸动作",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004924.png", import.meta.url)
                    .href,
                name: "纠偏油缸状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                    .href,
                name: "主顶1#泵状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#00FCFF"
            },
            {
                icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                    .href,
                name: "主顶2#泵状态",
                num: "--",
                unit: "",
                state: "--",
                stateColor: "#00FCFF"
            },
        ])
        const Option1 = ref({
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
            },
            color: ['#2AD8F5'],
            series: [
                {
                    min: 0,
                    max: 500,
                    name: 'Pressure',
                    type: 'gauge',
                    radius: '100%',
                    progress: {
                        show: true
                    },
                    title: {
                        textStyle: {
                            // fontWeight: 'bolder',
                            fontSize: 14,
                            color: "white"
                        },
                        offsetCenter: [0, '68%']
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}A',
                        offsetCenter: [0, '48%'],
                        color: '#fff',
                        fontWeight: '400',
                        fontSize: 24
                    },
                    axisLine: {
                        lineStyle: {
                            width: 3
                        }
                    },
                    axisTick: {
                        // distance: -112,
                        show: true,
                        length: 5,
                        lineStyle: {
                            width: 2,
                            color: 'rgba(255, 255, 255, 0.4)',
                        }
                    },
                    splitLine: {
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            zIndex: 999,
                        }
                    },
                    pointer: {
                        width: 4,
                        length: '80%',
                        // offsetCenter: [0, '5%'], 
                        itemStyle: {
                            color: '#2AD8F5',
                        }
                    },
                    axisLabel: {
                        color: '#DEE4EF',
                    },
                    data: [
                        {
                            value: 0,
                            name: '刀盘总电流',
                        }
                    ]
                }
            ]
        })
        const Option2 = ref({
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
            },
            color: ['#2AD8F5'],
            series: [
                {
                    min: 0,
                    max: 500,
                    name: 'Pressure',
                    type: 'gauge',
                    radius: '100%',
                    progress: {
                        show: true
                    },
                    title: {
                        textStyle: {
                            // fontWeight: 'bolder',
                            fontSize: 14,
                            color: "white"
                        },
                        offsetCenter: [0, '68%']
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}A',
                        offsetCenter: [0, '48%'],
                        color: '#fff',
                        fontWeight: '400',
                        fontSize: 24
                    },
                    axisLine: {
                        lineStyle: {
                            width: 3
                        }
                    },
                    axisTick: {
                        // distance: -112,
                        show: true,
                        length: 5,
                        lineStyle: {
                            width: 2,
                            color: 'rgba(255, 255, 255, 0.4)',
                        }
                    },
                    splitLine: {
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            zIndex: 999,
                        }
                    },
                    pointer: {
                        width: 4,
                        length: '80%',
                        // offsetCenter: [0, '5%'], 
                        itemStyle: {
                            color: '#2AD8F5',
                        }
                    },
                    axisLabel: {
                        color: '#DEE4EF',
                    },
                    data: [
                        {
                            value: 0,
                            name: '刀盘总电流',
                        }
                    ]
                }
            ]
        })
        const Change = () => {
            projectListshow.value = !projectListshow.value;
            // BenchId.value = JSON.parse(localStorage.getItem("BenchId"))
        }
        // 获取顶管机
        const doRefresh = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                    pageindex: 1,
                    pagesize: 99999,
                    searchword: ""
                })
            const res = await GetPushBench(fd);
            BenchList.value = res.data ?? [];
            if (localStorage.getItem("BenchId") != null && res.data.some(item => item.id == JSON.parse(localStorage.getItem("BenchId"))[0])) {
                var data = res.data.filter(item => item.id == JSON.parse(localStorage.getItem("BenchId"))[0])[0]
                BenchId.value = [data.id];
                BenchName.value = data.pushbenchname;
            } else {
                res.data.length ? BenchName.value = res.data[0].pushbenchname : "--";
                res.data.length ? BenchId.value = [res.data[0].id] : 0;
            }
            GetBenchDate();
        }
        const updateBench = ({ selectedValues, selectedOptions }) => {
            projectListshow.value = false;
            var data = BenchList.value.filter(item => item.id == selectedValues[0])[0]
            BenchName.value = data.pushbenchname;
            BenchId.value = selectedValues;
            localStorage.setItem("BenchId", JSON.stringify(selectedValues));
            GetBenchDate();
        }
        const GetBenchDate = async () => {
            let fd = CreatedFormData(
                {
                    deviceId: "",
                    pbId: BenchId.value[0],
                    pageIndex: 1,
                    pageSize: 99999,
                })
            const res = await GetPBGKDateList(fd);
            if (res.data) {
                DGformDataConfig.value = res.data.length > 0 ? res.data[0] : {};
                dataList.value[0].num = DGformDataConfig.value.ncyl;
                dataList.value[1].num = DGformDataConfig.value.jsyl;
                dataList.value[2].state = DGformDataConfig.value.jsbstatus == 0 ? "启动" : DGformDataConfig.value.jsbstatus == 1 ? "停止" : "过载"
                dataList.value[2].stateColor = DGformDataConfig.value.jsbstatus == 0 ? "#00FCFF" : DGformDataConfig.value.jsbstatus == 1 ? "#FF4004" : "#F2B55A"

                dataList.value[3].state = DGformDataConfig.value.csbstatus == 0 ? "启动" : DGformDataConfig.value.csbstatus == 1 ? "停止" : "过载"
                dataList.value[3].stateColor = DGformDataConfig.value.csbstatus == 0 ? "#00FCFF" : DGformDataConfig.value.csbstatus == 1 ? "#FF4004" : "#F2B55A"

                dataList.value[4].state = DGformDataConfig.value.pnbstatus == 0 ? "启动" : DGformDataConfig.value.pnbstatus == 1 ? "停止" : "过载"
                dataList.value[4].stateColor = DGformDataConfig.value.pnbstatus == 0 ? "#00FCFF" : DGformDataConfig.value.pnbstatus == 1 ? "#FF4004" : "#F2B55A"

                dataList.value[5].state = DGformDataConfig.value.jpbzstatus == 0 ? "启动" : DGformDataConfig.value.jpbzstatus == 1 ? "停止" : "过载"
                dataList.value[5].stateColor = DGformDataConfig.value.jpbzstatus == 0 ? "#00FCFF" : DGformDataConfig.value.jpbzstatus == 1 ? "#FF4004" : "#F2B55A"

                dataList.value[6].state = DGformDataConfig.value.zdygdz == 0 ? "顶伸" : "缩回"

                dataList.value[7].state = DGformDataConfig.value.jpygstatus == 0 ? "顶伸" : "缩回"

                dataList.value[8].state = DGformDataConfig.value.zdbstatus1 == 0 ? "启动" : "停止"
                dataList.value[8].stateColor = DGformDataConfig.value.zdbstatus1 == 0 ? "#00FCFF" : "#FF4004"

                dataList.value[9].state = DGformDataConfig.value.zdbstatus2 == 0 ? "启动" : "停止";
                dataList.value[9].stateColor = DGformDataConfig.value.zdbstatus2 == 0 ? "#00FCFF" : "#FF4004";

                Option1.value.series[0].data[0].value = DGformDataConfig.value.dpzdl ? DGformDataConfig.value.dpzdl : 0
                Option2.value.series[0].data[0].value = DGformDataConfig.value.dpzs ? DGformDataConfig.value.dpzs : 0;

            } else {
                DGformDataConfig.value = {};
                dataList.value = [
                    {
                        icon: new URL("@/assets/images/Group 1000004910.png", import.meta.url)
                            .href,
                        name: "泥仓压力",
                        num: "--",
                        unit: "bar",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004922.png", import.meta.url)
                            .href,
                        name: "进水压力",
                        num: "--",
                        unit: "bar",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                            .href,
                        name: "进水泵状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#FF4004"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                            .href,
                        name: "抽水泵状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                            .href,
                        name: "排泥泵状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#F2B55A"
                    },

                    {
                        icon: new URL("@/assets/images/Group 1000004925.png", import.meta.url)
                            .href,
                        name: "纠偏泵站状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004925.png", import.meta.url)
                            .href,
                        name: "主顶油缸动作",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004924.png", import.meta.url)
                            .href,
                        name: "纠偏油缸状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                            .href,
                        name: "主顶1#泵状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                    {
                        icon: new URL("@/assets/images/Group 1000004923.png", import.meta.url)
                            .href,
                        name: "主顶2#泵状态",
                        num: "--",
                        unit: "",
                        state: "--",
                        stateColor: "#00FCFF"
                    },
                ]
                Option1.value.series[0].data[0].value = 0
                Option2.value.series[0].data[0].value = 0;
            }
            await echartsOption();
        }
        const echartsOption = () => {
            myChart1.value = echarts.init(document.getElementById('main1'));
            myChart2.value = echarts.init(document.getElementById('main2'));
            myChart1.value.setOption(Option1.value);
            myChart2.value.setOption(Option2.value);
        }
        window.addEventListener('resize', function () {
            myChart1.value.resize();
            myChart2.value.resize();
        });

        onMounted(() => {
            doRefresh();
        });


        return {
            BenchId,
            BenchName,
            BenchList,
            dataList,
            DGformDataConfig,
            projectListshow,
            projectInfo,
            updateBench,
            doRefresh,
            Change,
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../../../assets/images/Group 1000004723.png') no-repeat;
    background-size: 100% 100%;
}

.titleClassOne {
    justify-content: start;
    padding-left: 0px;
    background: url("../../../assets/images/Group9436.png") no-repeat;
    background-size: 100% 100%;
}

.contentClassBench {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none; // 隐藏滚动条样式
}

.contentClass {
    display: flex;
    justify-content: center;
    padding: 10px;
    width: 100%;
    background-color: rgba(33, 46, 90, 0.5);
}

.lJStyle {
    width: 100%;
    height: 76px;
    background: url("../../../assets/images/Group 9618.png") no-repeat;
    background-size: 100% 100%;
}

.gradient-text {
    background: linear-gradient(-90deg, #FFFFFF 25.2%, #9BE5FF 57.07%, #0DCAF5 73.01%);
    background: -webkit-linear-gradient(-90deg, #FFFFFF 25.2%, #9BE5FF 57.07%, #0DCAF5 73.01%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
}

.horn {
    width: 45%;
    height: 92px;
    font-size: 20px;
    background-image: url("../../../assets/images/Group 1000004635.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.join {
    height: 116px;
    background-image: url("../../../assets/images/Group 1000004911.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.warningStyle {
    width: 80%;
    font-size: 28px;
    height: 100px;
    background-image: url("../../../assets/images/Group 9838.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.contentClassBench {
    width: 100%;
}

.Flex {
    display: flex;
    align-items: center;
}

.JCSB {
    justify-content: space-between;
}

.FDC {
    flex-direction: column;
}

.JCC {
    justify-content: center;
}

.DJF {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 0px 20px;
}



.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>